<!DOCTYPE html>
{% load i18n static simpletags %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<!--
   The project use: django-simpleui
   source code：
   https://github.com/newpanjing/simpleui
-->
<html lang="{{ LANGUAGE_CODE|default:" en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {% block title %}
        <title>{{ site_title }}-{% trans 'Log in' %}</title>
    {% endblock %}
    {% block icon %}
        <link rel="icon" href="{% static 'account/images/favicon.png' %}">
    {% endblock %}

    {% include 'admin/includes/css-part.html' %}

    {% block css %}
        <link rel="stylesheet" href="{% static 'admin/simpleui-x/css/login.css' %}?_=2.1">
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

    {% endblock %}
    {% block bg %}
        <style type="text/css">
            .bg {
                background: #f0f2f5;
                background-image: url('{% static 'admin/simpleui-x/img/bg.svg' %}');
                min-height: 100%;
                background-repeat: no-repeat;
                background-position: 50%;
                background-size: 100%;
                padding: 20px 0;
                position: relative;
            }

        </style>
    {% endblock %}

    {% block head %}
        {# You can add code here. #}
    {% endblock %}
</head>
<body class="bg">
{% block main %}
    <div class="login-main">
    {% block logo %}
        <div class="logo flex justify-center">
            {% if "SIMPLEUI_LOGO"|get_config %}
                <!--	引号内容不要有空格，不然无法找到图片	-->
                <img src="{{ "SIMPLEUI_LOGO"|get_config |safe }}">
            {% else %}
                <img src="{% static 'admin/simpleui-x/img/logo.png' %}">
            {% endif %}
        </div>
    {% endblock %}

    {% block header %}
        <div class="header">{{ site_header }}</div>
    {% endblock %}


    {% block form %}
        <div class="font-sans">
        <div class="relative sm:max-w-sm w-full">
            <div class="card bg-blue-400 shadow-lg  w-full h-full rounded-3xl absolute  transform -rotate-6"></div>
            <div class="card bg-red-400 shadow-lg  w-full h-full rounded-3xl absolute  transform rotate-6"></div>
            <div class="relative w-full rounded-3xl  px-6 py-4 bg-gray-100 shadow-md">
                <label for="input_username" class="block mt-3 text-sm text-gray-700 text-center font-semibold">
                    欢迎你！管理员
                </label>
                <form action="{{ app_path }}" method="post" id="login-form" class="mt-10">
                    {% csrf_token %}
                    <div class="simpleui-input-inline">
                        <el-input prefix-icon="fas fa-user" v-model="username" name="username"
                                  placeholder="{% trans 'username' %}" autofocus id="input_username"></el-input>
                    </div>
                    <div class="simpleui-input-inline">
                        <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
                                  @keyup.enter.native="login()"
                                  placeholder="{% trans 'password' %}" show-password></el-input>
                    </div>
                    {% url 'admin_password_reset' as password_reset_url %}
                    {% if password_reset_url %}

                        <div class="password-reset-link">
                            <a class="forgot-password"
                               href="{{ password_reset_url }}">{% trans 'Forgotten your password or
                                username?' %}</a>
                        </div>
                    {% endif %}
                    <div class="mt-7">
                        <button class="bg-blue-500 w-full py-3 rounded-xl text-white shadow-xl hover:shadow-inner focus:outline-none transition duration-500 ease-in-out  transform hover:-translate-x hover:scale-105">
                            {% trans 'Log in' %}
                        </button>
                    </div>
                    <input type="hidden" name="next" value="{{ next }}"/>
                </form>
            </div>
        </div>
    {% endblock %}
{% block errors %}
    {% if form.non_field_errors %}
        {% for error in form.non_field_errors %}
            <el-alert
                    title="{{ error }}"
                    type="error">
            </el-alert>
        {% endfor %}
    {% endif %}
    {% if form.errors and not form.non_field_errors %}
        <p class="errornote">
            {% if form.errors.items|length == 1 %}
                <el-alert title="{% trans " Please correct the error below." %}" type="error"></el-alert>
            {% else %}
                <el-alert title="{% trans " Please correct the errors below." %}" type="error"></el-alert>
            {% endif %}
        </p>
    {% endif %}
{% endblock %}
</div>
{% endblock %}
{% include 'admin/includes/js-part.html' %}
{% block login_js %}
    <script type="text/javascript" src="{% static 'admin/simpleui-x/js/login.js' %}?_=3.3"></script>
{% endblock %}

{% block particles %}
    {% if 'SIMPLEUI_LOGIN_PARTICLES'|get_config != False %}
        <!--
            Close login page particles see link:
            关闭登录页粒子动画请查看：
            https://github.com/newpanjing/simpleui/blob/master/QUICK.md#关闭登录页粒子动画
        -->
        <style type="text/css">
            #particles-js {
                position: fixed;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                z-index: -1;
            }

            .forgot-password {
                margin-top: 10px;
                color: #3a8ee6;
                text-decoration: none;

            &
            :hover,

            &
            :active,

            &
            :focus {
                color: lighten($ teal, 7);
            }

            }

        </style>
        <!-- particles.js container -->
        <div id="particles-js"></div>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/particles.js' %}"></script>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/app.js' %}"></script>
    {% endif %}


{% endblock %}

</body>
</html>
